<template>
	<view>
		<navigationbar
			:leftIcon="navigationbar.leftIcon"
			:title="navigationbar.title"
		/>
		<view class="msgContainer">
			<view class="msgContent" v-if="data">
				<view class="msgCard" v-for="(item,index) in data" :key='index' @click="toMsgDetail(item)">
					<image :src="item.to_info.recruitment.icon"></image>
					<view class="hrInfo">
						<view class="top">
							<view>
								<text class="name">{{item.to_info.recruitment.name}}</text>
								<text>{{item.to_info.recruitment.company}}·{{item.to_info.recruitment.position}}</text>
							</view>
							<view>
								<text class="date">{{item.create_date}}</text>
								<text class="iconfont icon-shenglvehao" @click.stop="editMsg(index)"></text>
							</view>
						</view>
						<text>{{item.body | msg}}</text>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty
				        mode="message"
				        icon="http://cdn.uviewui.com/uview/empty/message.png"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationbar from '../navigationBar.vue'
	export default {
		components:{
			navigationbar
		},
		filters:{
			msg(value) {
				if(value[0]?.content){
					let i = value.length - 1
					let res = value[i].content
					if(res?.fileName){
						return res.fileName
					}else{
						return res
					}
				}
			}
		},
		created() {
			this.getData()
		},
		data() {
			return {
				navigationbar: {
					leftIcon: '',
					title: '消息'
				},
				data: ''
			}
		},
		methods: {
			toMsgDetail(data) {
				console.log(data)
				this.$store.commit('setCurrentMsg',data)
				uni.navigateTo({
					url: 'messageDetail/messageDetail'
				})
			},
			editMsg(data) {
				this.data.splice(0,1)
			},
			getData() {
				uniCloud.callFunction({
					name: "getMsgData",
					data: {
						from_uid: this.$store.state.userID
					},
					success: (res) => {
						this.data = res.result.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.msgContainer {
		width: 100%;
		.msgContent {
			width: 90%;
			margin: 0 auto;
			.msgCard {
				display: flex;
				flex-flow: row;
				align-items: center;
				width: 100%;
				overflow: hidden;
				height: 180rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}
				.hrInfo {
					width: 80%;
					margin-left: 10rpx;
					font-size: 28rpx;
					&>text {
						font-size: 30rpx;
						display: inline-block;
						margin-top: 10rpx;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow:ellipsis;
					}
					.top {
						display: flex;
						flex-flow: row;
						justify-content: space-between;
						.name {
							font-size: 36rpx;
							margin-right: 20rpx;
						}
						.date {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

</style>
